@charset "UTF-8";

@import 'less.less';

.g{
	padding: 0 4%;
}



.pc {
	.container {
		overflow-y:scroll !important;
	}

	.scroll-wrap {
		width: 540px;
		margin:0 auto;		
		height:auto;

	}
}

.header {
	top: 0;
	height: 46px;
	line-height: 46px;
	background:#fff;
	text-align: center;
	z-index: 500;
	overflow:hidden;
	.iconfont {font-size: 30px;}
	.user {
		padding: 0 4%;
		float: left;
		text-align:left;
		margin-top: -2px;
	}
	.logo img {
		height: 24px;
		vertical-align: middle;
	}
	.title {
		font-size: 20px;
	}

	.bar {padding: 0 4%;}
	.bar i {font-size: 26px;}


}



.view {

	&.on:before {
		visibility:visible;
		opacity:1;
	}

	&:before {
		content:'';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
		opacity:0;
		visibility:hidden;
		background:rgba(0,0,0,.5);
		.trans();
	}
	.container {
		
	}
	
}


.nav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1002;
	width:100%;
	height: 100%;
	.transform(translateX(100%));
	.trans(.3s);

	&.on {
		.transform(translateX(0));
	}

	.nav-wrap {
		height: 100%;
		padding-left: 25%;
	}

	.num {
	    background: #ff0000 none repeat scroll 0 0;
	    border-radius: 50%;
	    color: #fff;
	    font-size: 12px;
	    height: 20px;
	    line-height: 20px;
	    position: absolute;
	    right: -10px;
	    text-align: center;
	    top: -2px;
	    width: 20px;
	}
	
	dl {
		height: 100%;
		background:#fff;
		-webkit-overflow-scroll:touch;
	}
	dt {
		line-height: .65rem;
		padding: .13rem .3rem;
		border-bottom: 1px solid #c6c6c6;
		.iconfont {font-size: 30px;vertical-align: -4px;}
		a {
			position: relative;
			margin-left: .2rem;
			font-size: 16px;

			.num {
				position: absolute;
				right: -10px;
				top: -2px;
				width: 20px;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				border-radius: 50%;
				background: #ff0000;
				text-align: center;
				color: #fff;
			}
		}
		
		a + a {
			margin-left:0;
		} 

		a + a:before {
			content:'/';
			padding-right: .08rem;
		}

	}

	dd {
		border-bottom: 1px solid #c6c6c6;
		text-align: center;
		a {
			padding: .2rem 0;
			display: block;
			line-height: 20px;
		}
		.fr {
			margin-right: .4rem;
		}

		span + span {
			padding: 0 10px;
		}

		ul {
			display: none;
			background: #eee;
			line-height: .7rem;
		}

		&.on  {
			> a {
				background:#bbb;
			}

			ul {
				display: block;
			}
		}
		

		

	}



}

.footer {
	position: fixed;
	bottom: 0;
	z-index: 99;
	width: 100%;
	background:#fff;
	text-align: center;
	border-top: 1px solid #ddd;

	.login {
		color: #fff;
		a + a {
			border-left: 1px solid;
			padding-left: .25rem;
			margin-left: .16rem;
		}
	}
	img {
		height: 24px;
		margin-top: -3px;
		vertical-align: middle;
	}
	.sns a + a {
		margin-left: .22rem;
	}

	li {
		a {
			font-size: 12px;
			padding: 6px 0;
			text-align: center;
		}
		i {
			display: inline-block;
			width: 18px;
			height: 18px;
			background-size: 18px auto;
			margin-top: 2px;
		}
		&.current {color: #F83D71;}
	}
	


}








